<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>问答列表 - 知享社区</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --text-tertiary: #9ca3af;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 10px;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 搜索区域 */
        .search-container {
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-group {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 12px 16px 12px 44px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            font-size: 18px;
        }
        
        /* 分类导航 */
        .category-tabs {
            display: flex;
            background-color: var(--bg-white);
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid var(--border-light);
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            padding: 14px 20px;
            white-space: nowrap;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-secondary);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
        }
        
        .category-tab.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
        }
        
        /* 问答列表容器 */
        .questions-container {
            padding: 12px 16px;
        }
        
        .filter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .filter-text {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .filter-sort {
            display: flex;
            gap: 12px;
        }
        
        .sort-btn {
            background: none;
            border: none;
            font-size: 14px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .sort-btn.active {
            color: var(--primary);
        }
        
        /* 问答卡片通用样式 */
        .question-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 12px;
            overflow: hidden;
            transition: transform 0.15s ease;
        }
        
        .question-card:hover {
            transform: translateY(-1px);
        }
        
        .question-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .question-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .question-author {
            flex: 1;
        }
        
        .author-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 1px;
        }
        
        .question-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .question-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 16px;
        }
        
        .question-content {
            padding: 16px;
        }
        
        .question-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .question-text {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        /* 问答标签 */
        .question-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .question-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }
        
        /* 无图问答样式 */
        .question-no-image .question-content {
            padding-bottom: 0;
        }
        
        /* 单图问答样式 */
        .question-single-image .question-image {
            width: 100%;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .question-single-image .question-image img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        /* 多图问答样式 */
        .question-multi-image .question-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .question-multi-image .question-image {
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        
        .question-multi-image .question-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 问答底部信息 */
        .question-footer {
            padding: 0 16px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .question-stats {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .question-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .question-actions {
            display: flex;
            gap: 12px;
        }
        
        .question-action {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .question-action.liked {
            color: var(--danger);
        }
        
        /* 已解决标记 */
        .solved-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            background-color: var(--success);
            color: white;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 浮动提问按钮 */
        .fab-ask {
            position: fixed;
            right: 24px;
            bottom: 86px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
            border: none;
            font-size: 24px;
            z-index: 999;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">问答社区</div>
        <button class="nav-btn primary" id="messageBtn">
            <i class="far fa-bell"></i>
        </button>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-container">
        <div class="search-group">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索问题、标签或用户...">
        </div>
    </div>
    
    <!-- 分类导航 -->
    <div class="category-tabs">
        <button class="category-tab active">全部问答</button>
        <button class="category-tab">技术问答</button>
        <button class="category-tab">生活常识</button>
        <button class="category-tab">经验分享</button>
        <button class="category-tab">学习交流</button>
        <button class="category-tab">职场困惑</button>
        <button class="category-tab">已解决</button>
    </div>
    
    <!-- 问答列表容器 -->
    <div class="questions-container">
        <div class="filter-bar">
            <div class="filter-text">找到 42 个问答</div>
            <div class="filter-sort">
                <button class="sort-btn active">
                    <i class="fas fa-fire"></i> 热门
                </button>
                <button class="sort-btn">
                    <i class="fas fa-clock"></i> 最新
                </button>
                <button class="sort-btn">
                    <i class="fas fa-comment"></i> 最多回复
                </button>
            </div>
        </div>
        
        <!-- 无图问答 -->
        <div class="question-card question-no-image" style="position: relative;">
            <div class="solved-badge">已解决</div>
            <div class="question-header">
                <img src="https://picsum.photos/id/64/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">前端开发工程师</div>
                    <div class="question-time">2天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">React和Vue在大型项目中哪个更有优势？</h3>
                <p class="question-text">
                    最近公司准备启动一个大型电商平台项目，技术选型上在React和Vue之间犹豫。团队成员两种技术都有使用经验，想了解在大型项目中，这两个框架各有什么优势和劣势？从性能、生态、团队协作等方面考虑，应该如何选择？
                </p>
                
                <div class="question-tags">
                    <span class="question-tag">React</span>
                    <span class="question-tag">Vue</span>
                    <span class="question-tag">前端框架</span>
                    <span class="question-tag">技术选型</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 1.2k
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 32
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action liked">
                        <i class="fas fa-thumbs-up"></i> 86
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 单图问答 -->
        <div class="question-card question-single-image">
            <div class="question-header">
                <img src="https://picsum.photos/id/91/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">摄影爱好者</div>
                    <div class="question-time">3天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">这张照片的光影效果如何改进？请各位大师指点</h3>
                <p class="question-text">
                    周末在郊外拍摄的风景照，总觉得光影效果不够理想，天空和地面的曝光很难平衡。想请教各位摄影爱好者，这种场景应该如何设置相机参数？后期处理有什么技巧可以提升效果？
                </p>
                
                <div class="question-image">
                    <img src="https://picsum.photos/id/29/600/400" alt="问题图片">
                </div>
                
                <div class="question-tags">
                    <span class="question-tag">摄影</span>
                    <span class="question-tag">光影</span>
                    <span class="question-tag">后期处理</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 856
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 18
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action">
                        <i class="far fa-thumbs-up"></i> 42
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 多图问答 -->
        <div class="question-card question-multi-image">
            <div class="question-header">
                <img src="https://picsum.photos/id/22/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">美食达人</div>
                    <div class="question-time">1天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">自制披萨总是失败，哪里出了问题？附制作过程图</h3>
                <p class="question-text">
                    尝试在家自制披萨，但成品总是不如外面的好吃。饼底要么太硬要么太软，芝士也不容易融化拉丝。附上制作过程中的几张图片，想请各位大神帮忙看看哪里出了问题？面团发酵和烘烤温度有什么讲究吗？
                </p>
                
                <div class="question-images">
                    <div class="question-image">
                        <img src="https://picsum.photos/id/292/300/300" alt="问题图片1">
                    </div>
                    <div class="question-image">
                        <img src="https://picsum.photos/id/431/300/300" alt="问题图片2">
                    </div>
                    <div class="question-image">
                        <img src="https://picsum.photos/id/488/300/300" alt="问题图片3">
                    </div>
                </div>
                
                <div class="question-tags">
                    <span class="question-tag">美食</span>
                    <span class="question-tag">烘焙</span>
                    <span class="question-tag">披萨</span>
                    <span class="question-tag">烹饪技巧</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 632
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 24
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action">
                        <i class="far fa-thumbs-up"></i> 36
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 无图问答 -->
        <div class="question-card question-no-image">
            <div class="question-header">
                <img src="https://picsum.photos/id/45/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">职场新人</div>
                    <div class="question-time">4天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">如何有效管理远程工作的时间和效率？</h3>
                <p class="question-text">
                    公司开始实行混合办公模式，每周有2-3天可以远程工作。但在家工作时总是容易分心，效率不高，而且很难区分工作和生活的边界。想问问有经验的朋友，如何制定远程工作的时间表？有什么工具或方法可以提高远程工作的效率？
                </p>
                
                <div class="question-tags">
                    <span class="question-tag">远程工作</span>
                    <span class="question-tag">时间管理</span>
                    <span class="question-tag">职场</span>
                    <span class="question-tag">效率工具</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 945
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 47
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action liked">
                        <i class="fas fa-thumbs-up"></i> 128
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 单图问答 -->
        <div class="question-card question-single-image" style="position: relative;">
            <div class="solved-badge">已解决</div>
            <div class="question-header">
                <img src="https://picsum.photos/id/54/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">园艺爱好者</div>
                    <div class="question-time">1周前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">我养的绿萝叶子发黄，是什么原因导致的？</h3>
                <p class="question-text">
                    家里养的绿萝最近叶子开始发黄，尤其是新长出来的叶子。浇水频率大概是一周一次，放在客厅有散射光的位置。不知道是不是生病了还是养护方法有问题？需要换盆或者施肥吗？
                </p>
                
                <div class="question-image">
                    <img src="https://picsum.photos/id/106/600/400" alt="问题图片">
                </div>
                
                <div class="question-tags">
                    <span class="question-tag">园艺</span>
                    <span class="question-tag">绿萝</span>
                    <span class="question-tag">植物养护</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 521
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 15
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action">
                        <i class="far fa-thumbs-up"></i> 29
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <button class="load-more" id="loadMoreBtn">加载更多问答</button>
    </div>
    
    <!-- 浮动提问按钮 -->
    <button class="fab-ask" id="askBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-question-circle nav-icon"></i>
            <span>问答</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 问答操作菜单 -->
    <div class="modal fade" id="questionMenuModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-share-alt me-2"></i> 分享问答
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-bookmark me-2"></i> 收藏问答
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-report me-2"></i> 举报问题
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const messageBtn = document.getElementById('messageBtn');
        const askBtn = document.getElementById('askBtn');
        const categoryTabs = document.querySelectorAll('.category-tab');
        const sortBtns = document.querySelectorAll('.sort-btn');
        const questionMenus = document.querySelectorAll('.question-menu');
        const questionActions = document.querySelectorAll('.question-action');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const toast = document.getElementById('toast');
        const questionMenuModal = new bootstrap.Modal(document.getElementById('questionMenuModal'));
        const searchInput = document.querySelector('.search-input');
        const questionCards = document.querySelectorAll('.question-card');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 消息通知按钮
            messageBtn.addEventListener('click', () => {
                showToast('查看消息通知');
            });
            
            // 提问按钮
            askBtn.addEventListener('click', () => {
                showToast('进入提问页面');
            });
            
            // 分类标签切换
            categoryTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabText = this.textContent;
                    categoryTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    showToast(`已切换到${tabText}`);
                    
                    // 这里可以添加实际筛选逻辑
                });
            });
            
            // 排序按钮
            sortBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const sortText = this.textContent.trim();
                    sortBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    showToast(`已按${sortText}排序`);
                    
                    // 这里可以添加实际排序逻辑
                });
            });
            
            // 问答操作菜单
            questionMenus.forEach(menu => {
                menu.addEventListener('click', function(e) {
                    e.stopPropagation();
                    questionMenuModal.show();
                });
            });
            
            // 问答操作按钮（点赞、收藏）
            questionActions.forEach(action => {
                action.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    
                    // 点赞功能
                    if (icon.classList.contains('fa-thumbs-up')) {
                        if (this.classList.contains('liked')) {
                            this.classList.remove('liked');
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            const count = parseInt(this.textContent.trim().split(' ')[1]);
                            this.innerHTML = '<i class="far fa-thumbs-up"></i> ' + (count - 1);
                            showToast('已取消点赞');
                        } else {
                            this.classList.add('liked');
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            const count = parseInt(this.textContent.trim().split(' ')[1]);
                            this.innerHTML = '<i class="fas fa-thumbs-up"></i> ' + (count + 1);
                            showToast('点赞成功');
                        }
                    }
                    // 收藏功能
                    else if (icon.classList.contains('fa-bookmark')) {
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.textContent = ' 已收藏';
                            this.prepend(icon);
                            showToast('收藏成功');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.textContent = ' 收藏';
                            this.prepend(icon);
                            showToast('已取消收藏');
                        }
                    }
                });
            });
            
            // 点击问答卡片进入详情
            questionCards.forEach(card => {
                card.addEventListener('click', function() {
                    const questionTitle = this.querySelector('.question-title').textContent;
                    showToast(`查看问答: ${questionTitle.substring(0, 10)}...`);
                    // 实际应用中这里会跳转到问答详情页
                });
            });
            
            // 搜索功能
            searchInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchText = this.value.trim();
                    if (searchText) {
                        showToast(`搜索: ${searchText}`);
                        // 实际应用中这里会触发搜索请求
                    }
                }
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                setTimeout(() => {
                    this.textContent = '加载更多问答';
                    showToast('已加载全部问答');
                }, 1500);
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>